.container{max-width: 10rem;margin: 0 auto;}
.top{width: 100%;height: 5rem;position:relative;}
.head{width: 100%;height: 1.28rem;background:rgba(101,97,96,.5);position:absolute;left: 0;top: 0;right: 0;display:flex;box-sizing:border-box;padding:.54rem .3rem .12rem;justify-content: space-between;align-items: center;}
.head-left{display:flex;background:#3b3b3a;border: .02rem solid #3b3b3a;border-radius: .12rem;align-items: center;}
.head-left img{display:block;width: .42rem;height: .42rem;margin: .1rem 0 0 .1rem}
.text-center{display:block;height:.6rem;width: 5.2rem;background:#3b3b3a;font-size: .25rem;text-align: center;border:none;}
.head .set{display:block;width: .42rem;height: .42rem;}
.head .set img{display:block;}
.top-letter{
	width: 100%;
	height: 3.62rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 1.28rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.top .letter{
	width: 5rem;
	height: 1.7rem;
	border: 4px solid white;
	position: absolute;
	/* top: .9rem; */
/* 	bottom: 1.1rem;
	left: 1.3rem;
	right: 1.2rem; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.letter span{
	font-size: .26rem;
	text-align: center;
	color: #ffffff;
}
.mid{
	width: 100%;
	height: 1.34rem;
	margin-top: .22rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.mid .one{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.mid .one img{
	display: block;
}
.mid .one span{
	text-align: center;
	display: block;
	font-size: .16rem;
	color:#4c4c4c ;
}
.bottom{
	width: 100%;
	margin-top: .5rem;
	box-sizing: border-box;
	padding: 0 .3rem;
}
.bottom .biaoti{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
h2{
	font-size: .32rem;
	color: #333333;
	font-weight: normal;
}
h3{
	font-size: .28rem;
	color: #b8b8b8;
	font-weight: normal;
}
.picture{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: .2rem;
}
.left{
	width: 3.1rem;
	height: 5.12rem;
}
.right{
	width: 3.58rem;
	height: 5.12rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.right img{
	height: 48%;
}
nav{
	width: 100%;
	height: 1rem;
	background: #000000;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
}
nav .item>span{
	font-size: .24rem;
	color: #999999;
}
nav .nav{
	width: 6.9rem;
	height: 100%;
	margin: 0 .3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav .item{
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}
nav #item>span{
	color: #f2621c;
    }
